<script lang="ts" setup>
import { RouteLocationRaw } from "vue-router";
import ProductBox from "../Common/ProductBox.vue";
import { ref } from 'vue';

import type { TabsPaneContext } from 'element-plus'

const activeName = ref('first')

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}

export type softwareData = {
  name: string,
  price: number,
  number: number | string;
  intro: string;
  funct: string;
  path: RouteLocationRaw
}

export type softwareDataList = {
  title: string,
  data: softwareData[]
}

// define data list
defineProps({
  dataList: {
    type: Array as () => softwareDataList[],
    required: true,
  },
})

const emit = defineEmits([
  'click'
])

const toPlaceOrder = (cardInfo: softwareData) => {
  emit('click', cardInfo.path)
}


const open = ref<boolean>(false);

const showModal = (card: softwareData) => {
  open.value = true;
  chosen.value = card
};

const handleOk = (e: MouseEvent) => {
  console.log(e);
  open.value = false;
};

const chosen = ref<null | softwareData>(null)

</script>
<template>
  <div class="bg-gray-50 w-full pl-5 pr-5">
    <ProductBox title="产品列表">
      <div v-for="(item, index) in dataList" :key="index">
        <h3>
          {{ item.title }}
        </h3>

        <div class="flex flex-wrap">
          <div v-for="(card, seq) in item.data" :key="index + '_' + seq" class="mb-5 md:mr-20 w-full md:w-auto">
            <a-card :title="card.name" :bordered="false" class="min-w-50 md:w-100 w-full">
              <p>免责条款：因本产品是卡密时效一旦激活将无法退回拍前认真阅读购买激活默认签署软件服务协议详情官网法律声明! <a-button type="link" class="text-sm"
                  @click="showModal(card)">查看详情</a-button> </p>
              <p>
                价格：<span class="text-red-600 font-bold text-1xl">{{ card.price }}元</span>
              </p>
              <p class="flex justify-end">
                <a-button type="primary" @click="toPlaceOrder(card)">立即购买</a-button>
              </p>
            </a-card>
          </div>
        </div>
      </div>
    </ProductBox>
  </div>

  <a-modal v-model:open="open" @ok="handleOk">
    <el-tabs v-model="activeName" :tab-position="'top'" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="产品介绍" name="first">
        <div class="text-sm font-normal">
          {{ chosen?.intro || '暂无介绍' }}
        </div>
      </el-tab-pane>
      <el-tab-pane label="产品功能" name="second">
        <div class="text-sm font-normal">
          {{ chosen?.funct || '暂无产品功能' }}
        </div>
      </el-tab-pane>
    </el-tabs>
  </a-modal>
</template>


<style>
.demo-tabs>.el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
</style>
<style lang="scss" scoped></style>
